<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>批量修改与替换</title>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <!--引入layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>

    <style>
        .changeLHight .el-form-item__label{
            line-height: 16px !important;
        }
        body{
            padding: 20px 40px;
        }

    </style>
</head>
<body>
<div id="app"  >
    <div>
        <el-form label-position="right" label-width="200px" size="small" >
            <el-form-item v-for="(field,index) in columns" :label="field.show_name"  :class="field.show_name.length>7?'changeLHight':''"  >
                <el-input v-if="field.col_style == 0 || field.col_style == 3 || field.col_style == 4"  v-model="columns[index]['v_text']"  style="width: 220px;"  placeholder="填写要修改后的内容" ></el-input>

                <!--日期框-->
                <el-date-picker v-if="field.col_style == 1"  value-format="yyyy-MM-dd"
                                :name="field.id"
                                v-model="columns[index]['v_text']" :placeholder="field.show_name" style="width:220px"
                                type="date" >
                </el-date-picker>

                <!--日期框年月-->
                <template v-if="field.col_style == 15" >
                    <el-date-picker value-format="yyyyMM"
                                    :name="field.id"
                                    v-model="columns[index]['v_text']" style="width:220px" :placeholder="field.show_name"
                                    type="month" >
                    </el-date-picker>
                </template>

                <!--时分秒日期框-->
                <el-date-picker
                        v-if="field.col_style == 5"  value-format="yyyy-MM-dd HH:mm:ss"
                        :name="field.id"
                        v-model="columns[index]['v_text']" style="width:220px"  :placeholder="field.show_name"
                        type="datetime" >
                </el-date-picker>

                <!--下拉框-->
                <el-select
                        v-if="field.col_style == 6 || field.col_style == 8" filterable
                        v-model="columns[index]['v_text']" style="width:220px"   :placeholder="field.show_name" >
                    <el-option value="" ></el-option>
                    <el-option v-for="option in field.options" :label="option.value" :value="option.key"></el-option>
                </el-select>

                <!--下拉框多选-->
                <el-select  multiple
                            v-model="columns[index]['v_text']" style="width:220px"
                            v-if="field.col_style == 12 || field.col_style == 13" filterable
                            :placeholder="field.show_name" >
                    <el-option value="" ></el-option>
                    <el-option v-for="option in field.options" :label="option.value" :value="option.key"></el-option>
                </el-select>

                <el-switch v-if="field.col_style == 10"
                           v-model="columns[index]['v_text']" >
                </el-switch>

                <div>
                    <template>
                        <el-radio v-model="columns[index]['v_type']" label="1">修改</el-radio>
                        <el-radio v-model="columns[index]['v_type']" label="2">置空</el-radio>
                        <el-radio v-model="columns[index]['v_type']" label="3">替换</el-radio>
                    </template>
                </div>

                <div v-if="columns[index]['v_type'] == 3">
                    <template>
                        <el-input v-if="field.col_style == 0 || field.col_style == 3 || field.col_style == 4 || field.col_style == 5 || field.col_style == 15 || field.col_style == 1"  v-model="columns[index]['v_text_old']"  style="width: 200px;"   placeholder="要替换的值" ></el-input>



                        <!--下拉框-->
                        <el-select
                                v-if="field.col_style == 6 || field.col_style == 8" filterable
                                v-model="columns[index]['v_text_old']" style="width:200px"   placeholder="要替换的值" >
                            <el-option value="" ></el-option>
                            <el-option v-for="option in field.options" :label="option.value" :value="option.key"></el-option>
                        </el-select>

                        <!--下拉框多选-->
                        <el-select  multiple
                                    v-model="columns[index]['v_text_old']" style="width:200px"
                                    v-if="field.col_style == 12 || field.col_style == 13" filterable
                                    placeholder="要替换的值" >
                            <el-option value="" ></el-option>
                            <el-option v-for="option in field.options" :label="option.value" :value="option.key"></el-option>
                        </el-select>

                        <el-switch v-if="field.col_style == 10"
                                   v-model="columns[index]['v_text_old']" >
                        </el-switch>
                    </template>

                    <template>
                        <span>替换为</span>

                        <el-switch v-if="field.col_style == 10"
                                   v-model="columns[index]['v_text_new']" >
                        </el-switch>

                        <el-input v-if="field.col_style == 0 || field.col_style == 3 || field.col_style == 4 || field.col_style == 5 || field.col_style == 15 || field.col_style == 1"  v-model="columns[index]['v_text_new']"
                                  style="width: 200px;"   placeholder="替换后的新值" ></el-input>


                        <!--下拉框-->
                        <el-select
                                v-if="field.col_style == 6 || field.col_style == 8" filterable
                                v-model="columns[index]['v_text_new']" style="width:200px"   placeholder="替换后的新值" >
                            <el-option value="" ></el-option>
                            <el-option v-for="option in field.options" :label="option.value" :value="option.key"></el-option>
                        </el-select>

                        <!--下拉框多选-->
                        <el-select  multiple
                                    v-model="columns[index]['v_text_new']" style="width:200px"
                                    v-if="field.col_style == 12 || field.col_style == 13" filterable
                                    placeholder="替换后的新值" >
                            <el-option value="" ></el-option>
                            <el-option v-for="option in field.options" :label="option.value" :value="option.key"></el-option>
                        </el-select>


                    </template>

                </div>
            </el-form-item>
        </el-form>
    </div>
</div>
</body>
<script>

    var vm = new Vue({
        el:"#app",
        data:{
            parmsData:{},
            columns:[],
        },
        created(){
            this.parmsData = getParams();
            this.init();
        },
        methods:{
            async init(){
                const res = await post("/admin/api/DataManagementController/GetAllFieldsInTheTableEvent2",{tableId:this.parmsData.tableId});
                this.columns = res.data;
            },

        }
    });
</script>
</html>